import React from 'react'
import {delListAction,changeAction} from '../redux/actions'



export default function List(props) {

  function clickHandleDel(e){
    e.preventDefault()
    props.store.dispatch(delListAction(props.index))
  }
   
  //在redux中通过getState() 获取仓库数据
  const lis = props.store.getState().list
  .map((item, index) => {
    return (
      <li key={index} className='text-primary'>
        <span
        onClick={()=>{
          props.store.dispatch(changeAction(index))}}
          className={['item',!item.status ? 'completed':''].join(' ')}
        >{item.content}</span>
        <button
        type='button'
        className='close'
        onClick={clickHandleDel}
        >&times;</button>
      </li>
    )
  })

  return (
    <div>
      <ul style={{marginTop:'20px'}}>{lis}</ul>
    </div>
  )
}